import { h, render } from 'preact';
import { useState, useCallback } from 'preact/hooks';
import HammerComponent from '@h5/external/event';

import { ITEM_STATUS } from "@project/todo/model/constant";
import { getData, updateData } from "@store/data";
import { envoke } from "@store";
import "@static/components/icons/check.less";
import "@static/components/icons/close.less";

const { DONE, WAIT } = ITEM_STATUS;

export default props => {
    const { uuid, pid } = props;
    const data = getData(uuid);
    let [item, setItem] = useState(data);

    const updateDoneStatus = useCallback((e) => {
        item.status = DONE;
        const newItem = {...item};
        updateData(uuid, newItem);
        setItem(newItem);
    }, [item]);

    const deleteItem = useCallback((e) => {
        envoke(pid, 'removeList', item)
    }, [item]);

    const clickMethod = useCallback((e) => {
        console.log('...onTap...', e);
        if(item.status === WAIT){
            updateDoneStatus(e);
        }else{
            deleteItem(e);
        }
    })

    const cls = item.status === WAIT ? "" : "completed"; 
    const showBtnCls = item.status === WAIT ? "gg-check" : "gg-close";

    return <div className="tasks">
                <span className={cls}>{item.name}</span>
                <HammerComponent onTap={clickMethod}>
                    <div style={{paddingTop: 8}} className="button">
                        <a href="#" onClick={e => e.preventDefault()} className={showBtnCls} style={{display: "inline-block", verticalAlign: "text-bottom"}}></a>
                    </div>
                </HammerComponent>
           </div>
}